<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校对设置 - 文墨勘</title>
    <script src="https://unpkg.byted-static.com/coze/space_ppt_lib/1.0.3-alpha.12/lib/tailwindcss.js"></script>
    <script src="https://unpkg.byted-static.com/fortawesome/fontawesome-free/6.7.2/js/all.min.js" data-auto-replace-svg="nest"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#F4EFEB',
                        secondary: '#EAD2BE', 
                        accent: '#70533B',
                        'text-primary': '#2D2D2D',
                        'text-secondary': '#6B7280',
                        'bg-card': '#FFFFFF',
                        'border-light': '#F3F4F6'
                    },
                    fontFamily: {
                        'chinese': ['-apple-system', 'BlinkMacSystemFont', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'sans-serif']
                    },
                    boxShadow: {
                        'card': '0 2px 8px rgba(0, 0, 0, 0.04)',
                        'button': '0 4px 12px rgba(112, 83, 59, 0.15)'
                    }
                }
            }
        }
    </script>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #F4EFEB 0%, #EAD2BE 100%);
        }
        
        .card-hover:active {
            transform: scale(0.98);
            transition: transform 0.1s ease;
        }
        
        .setting-button:active {
            transform: translateY(1px);
            box-shadow: 0 2px 8px rgba(112, 83, 59, 0.2);
        }
        
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 48px;
            height: 28px;
        }
        
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #E5E7EB;
            transition: .4s;
            border-radius: 28px;
        }
        
        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        
        input:checked + .toggle-slider {
            background-color: #70533B;
        }
        
        input:checked + .toggle-slider:before {
            transform: translateX(20px);
        }
        
        .status-bar {
            height: env(safe-area-inset-top, 44px);
            background: linear-gradient(135deg, #F4EFEB 0%, #EAD2BE 100%);
        }
        
        .type-option {
            transition: all 0.2s ease;
        }
        
        .type-option.selected {
            background-color: #70533B;
            color: white;
        }
        
        .type-option:not(.selected) {
            background-color: #FFFFFF;
            color: #2D2D2D;
        }
    </style>
</head>
<body class="bg-primary font-chinese">
    <!-- iOS状态栏 -->
    <div id="status-bar" class="status-bar flex justify-between items-center px-6 text-sm font-medium text-accent">
        <span>9:41</span>
        <div class="flex items-center space-x-1">
            <i class="fas fa-signal text-xs"></i>
            <i class="fas fa-wifi text-xs"></i>
            <i class="fas fa-battery-three-quarters text-xs"></i>
        </div>
    </div>

    <!-- 主要内容区域 -->
    <div id="main-content" class="min-h-screen pb-8">
        <!-- 顶部导航区域 -->
        <header id="page-header" class="gradient-bg px-6 py-4">
            <div class="flex items-center justify-between">
                <button id="back-button" class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                    <i class="fas fa-arrow-left text-accent text-lg"></i>
                </button>
                <h1 id="page-title" class="text-xl font-semibold text-accent">校对设置</h1>
                <div class="w-10"></div> <!-- 占位元素保持标题居中 -->
            </div>
        </header>

        <!-- 文稿类型选择 -->
        <section id="document-type-section" class="px-6 mt-6 mb-6">
            <h2 class="text-lg font-semibold text-text-primary mb-4">文稿类型</h2>
            <div id="type-options" class="space-y-3">
                <button id="type-novel" class="type-option w-full p-4 rounded-2xl shadow-card text-left border border-border-light selected">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-secondary rounded-xl flex items-center justify-center">
                                <i class="fas fa-book-open text-accent"></i>
                            </div>
                            <div>
                                <h3 class="font-medium">小说</h3>
                                <p class="text-sm text-text-secondary">文学创作、故事叙述类文稿</p>
                            </div>
                        </div>
                        <i class="fas fa-check text-white text-lg"></i>
                    </div>
                </button>
                
                <button id="type-document" class="type-option w-full p-4 rounded-2xl shadow-card text-left border border-border-light">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-secondary rounded-xl flex items-center justify-center">
                                <i class="fas fa-file-alt text-accent"></i>
                            </div>
                            <div>
                                <h3 class="font-medium">公文</h3>
                                <p class="text-sm text-text-secondary">正式文件、报告、函件等</p>
                            </div>
                        </div>
                        <i class="fas fa-check text-text-secondary text-lg opacity-0"></i>
                    </div>
                </button>
                
                <button id="type-professional" class="type-option w-full p-4 rounded-2xl shadow-card text-left border border-border-light">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-secondary rounded-xl flex items-center justify-center">
                                <i class="fas fa-graduation-cap text-accent"></i>
                            </div>
                            <div>
                                <h3 class="font-medium">专业图书</h3>
                                <p class="text-sm text-text-secondary">学术著作、专业教材等</p>
                            </div>
                        </div>
                        <i class="fas fa-check text-text-secondary text-lg opacity-0"></i>
                    </div>
                </button>
            </div>
        </section>

        <!-- 校对规则设置 -->
        <section id="review-rules-section" class="px-6 mb-6">
            <h2 class="text-lg font-semibold text-text-primary mb-4">校对规则</h2>
            <div id="rules-list" class="space-y-4">
                <div id="rule-typo" class="bg-bg-card rounded-2xl p-4 shadow-card">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-secondary rounded-xl flex items-center justify-center">
                                <i class="fas fa-spell-check text-accent"></i>
                            </div>
                            <div>
                                <h3 class="font-medium text-text-primary">检查错别字</h3>
                                <p class="text-sm text-text-secondary">识别并纠正错别字</p>
                            </div>
                        </div>
                        <label class="toggle-switch">
                            <input type="checkbox" id="toggle-typo" checked>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
                
                <div id="rule-punctuation" class="bg-bg-card rounded-2xl p-4 shadow-card">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-secondary rounded-xl flex items-center justify-center">
                                <i class="fas fa-punctuation text-accent"></i>
                            </div>
                            <div>
                                <h3 class="font-medium text-text-primary">检查标点符号</h3>
                                <p class="text-sm text-text-secondary">规范标点符号使用</p>
                            </div>
                        </div>
                        <label class="toggle-switch">
                            <input type="checkbox" id="toggle-punctuation" checked>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
                
                <div id="rule-format" class="bg-bg-card rounded-2xl p-4 shadow-card">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-secondary rounded-xl flex items-center justify-center">
                                <i class="fas fa-align-left text-accent"></i>
                            </div>
                            <div>
                                <h3 class="font-medium text-text-primary">检查格式规范</h3>
                                <p class="text-sm text-text-secondary">标题层级、段落格式等</p>
                            </div>
                        </div>
                        <label class="toggle-switch">
                            <input type="checkbox" id="toggle-format" checked>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
                
                <div id="rule-terms" class="bg-bg-card rounded-2xl p-4 shadow-card">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-secondary rounded-xl flex items-center justify-center">
                                <i class="fas fa-book text-accent"></i>
                            </div>
                            <div>
                                <h3 class="font-medium text-text-primary">检查专业术语</h3>
                                <p class="text-sm text-text-secondary">校验术语使用准确性</p>
                            </div>
                        </div>
                        <label class="toggle-switch">
                            <input type="checkbox" id="toggle-terms" checked>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
                
                <div id="rule-duplicate" class="bg-bg-card rounded-2xl p-4 shadow-card">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-secondary rounded-xl flex items-center justify-center">
                                <i class="fas fa-copy text-accent"></i>
                            </div>
                            <div>
                                <h3 class="font-medium text-text-primary">检查内容重复</h3>
                                <p class="text-sm text-text-secondary">识别冗余表达和重复内容</p>
                            </div>
                        </div>
                        <label class="toggle-switch">
                            <input type="checkbox" id="toggle-duplicate">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
                
                <div id="rule-logic" class="bg-bg-card rounded-2xl p-4 shadow-card">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-secondary rounded-xl flex items-center justify-center">
                                <i class="fas fa-brain text-accent"></i>
                            </div>
                            <div>
                                <h3 class="font-medium text-text-primary">检查逻辑矛盾</h3>
                                <p class="text-sm text-text-secondary">分析时间线、人物设定等</p>
                            </div>
                        </div>
                        <label class="toggle-switch">
                            <input type="checkbox" id="toggle-logic">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
            </div>
        </section>

        <!-- 自定义术语库 -->
        <section id="term-library-section" class="px-6 mb-8">
            <div id="term-library-card" class="bg-bg-card rounded-2xl p-4 shadow-card">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 bg-secondary rounded-xl flex items-center justify-center">
                            <i class="fas fa-cog text-accent"></i>
                        </div>
                        <div>
                            <h3 class="font-medium text-text-primary">自定义术语库</h3>
                            <p class="text-sm text-text-secondary">管理专业术语，提升校对准确性</p>
                        </div>
                    </div>
                    <button id="term-manage-button" class="text-accent">
                        <i class="fas fa-chevron-right text-lg"></i>
                    </button>
                </div>
            </div>
        </section>

        <!-- 开始校对按钮 -->
        <section id="start-section" class="px-6">
            <button id="start-review-button" class="w-full bg-accent text-white py-4 rounded-2xl shadow-button setting-button flex items-center justify-center space-x-3">
                <i class="fas fa-play text-xl"></i>
                <span class="text-lg font-semibold">开始校对</span>
            </button>
        </section>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取URL参数
            function getUrlParams() {
                const params = {};
                const queryString = window.location.search.substring(1);
                const urlParams = new URLSearchParams(queryString);
                
                for(const [key, value] of urlParams.entries()) {
                    params[key] = value;
                }
                return params;
            }

            // 获取上传的文件信息
            const params = getUrlParams();
            let selectedFiles = [];
            if (params.selected_files) {
                try {
                    selectedFiles = JSON.parse(decodeURIComponent(params.selected_files));
                } catch (e) {
                    console.log('解析文件参数失败');
                }
            }

            // 文稿类型选择
            const typeOptions = document.querySelectorAll('.type-option');
            typeOptions.forEach(option => {
                option.addEventListener('click', function() {
                    // 移除所有选中状态
                    typeOptions.forEach(opt => {
                        opt.classList.remove('selected');
                        const checkIcon = opt.querySelector('.fa-check');
                        checkIcon.classList.remove('text-white');
                        checkIcon.classList.add('text-text-secondary', 'opacity-0');
                    });
                    
                    // 添加当前选中状态
                    this.classList.add('selected');
                    const checkIcon = this.querySelector('.fa-check');
                    checkIcon.classList.remove('text-text-secondary', 'opacity-0');
                    checkIcon.classList.add('text-white');
                    
                    // 根据文稿类型设置默认规则
                    setDefaultRules(this.id);
                });
            });

            // 根据文稿类型设置默认规则
            function setDefaultRules(typeId) {
                // 重置所有规则为关闭状态
                document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
                    checkbox.checked = false;
                });

                switch(typeId) {
                    case 'type-novel':
                        // 小说类型默认开启的规则
                        document.querySelector('#toggle-typo').checked = true;
                        document.querySelector('#toggle-punctuation').checked = true;
                        document.querySelector('#toggle-format').checked = true;
                        document.querySelector('#toggle-logic').checked = true;
                        break;
                    case 'type-document':
                        // 公文类型默认开启的规则
                        document.querySelector('#toggle-typo').checked = true;
                        document.querySelector('#toggle-punctuation').checked = true;
                        document.querySelector('#toggle-format').checked = true;
                        document.querySelector('#toggle-terms').checked = true;
                        break;
                    case 'type-professional':
                        // 专业图书类型默认开启的规则
                        document.querySelector('#toggle-typo').checked = true;
                        document.querySelector('#toggle-punctuation').checked = true;
                        document.querySelector('#toggle-format').checked = true;
                        document.querySelector('#toggle-terms').checked = true;
                        document.querySelector('#toggle-duplicate').checked = true;
                        break;
                }
            }

            // 返回按钮点击事件
            document.querySelector('#back-button').addEventListener('click', function() {
                window.location.href = 'P-UPLOAD.html';
            });

            // 术语库管理按钮点击事件
            document.querySelector('#term-manage-button').addEventListener('click', function() {
                window.location.href = 'P-TERM_MANAGE.html';
            });

            // 开始校对按钮点击事件
            document.querySelector('#start-review-button').addEventListener('click', function() {
                // 获取当前设置
                const currentType = document.querySelector('.type-option.selected').id;
                const rules = {
                    typo: document.querySelector('#toggle-typo').checked,
                    punctuation: document.querySelector('#toggle-punctuation').checked,
                    format: document.querySelector('#toggle-format').checked,
                    terms: document.querySelector('#toggle-terms').checked,
                    duplicate: document.querySelector('#toggle-duplicate').checked,
                    logic: document.querySelector('#toggle-logic').checked
                };

                // 生成文档ID
                const docId = 'doc_' + Date.now();
                
                // 模拟开始校对处理
                this.innerHTML = '<i class="fas fa-spinner fa-spin text-xl"></i><span class="text-lg font-semibold">校对中...</span>';
                this.disabled = true;

                // 模拟处理时间
                setTimeout(() => {
                    // 跳转到校对结果页面，传递文档ID和设置
                    const settings = {
                        docId: docId,
                        type: currentType,
                        rules: rules,
                        files: selectedFiles
                    };
                    
                    window.location.href = `P-REVIEW_RESULT.html?settings=${encodeURIComponent(JSON.stringify(settings))}`;
                }, 2000);
            });

            // 初始化默认规则（小说类型）
            setDefaultRules('type-novel');
        });
    </script>
</body>
</html>